<template>
	<div class="all">
	<el-card class="box-card">
	  <div slot="header" class="clearfix">
	    <span>个人信息</span>
	    <el-button style="float: right; padding: 3px 0" type="text" @click="toggleModal">编辑</el-button>
	   
	  </div>
	  
	  <v-foot v-show="showModal" width="500" height="450" 
      @on-cancel="cancel">
	  </v-foot>
	  
	  
	  
	  
	  
	  <div class="content1">
	  	<div class="txt1">
	  <div v-for="item in list"  class="text item">
	    {{item}}
	  </div>
	  </div>
	  <div class="txt2">
	  <div v-for="shuju in arrlist" class="text item1">
	  	{{shuju}}
	  </div>
	  </div>
	  </div>
  	</el-card>
  	</div>
</template>

<script>
	import resource from '@/components/resource/resource'
	export default{
		data(){
			return{
				list:['用户名','性别','角色','出生日期','手机号码','邮箱','职业','公司','部门','入职日期','宿舍','离职时间','修改时间','积分'],
				arrlist:['渣渣','女','普通用户','2019-9-18','18898868830','458758555@qq.com','前端','xxxxx','xxxxx','2019-7-29','4B302','2019-11-29','2019-9-18','0'],
				showModal: false
			}
		},
		components:{
			'v-foot':resource
		},
		 methods:{   
    toggleModal() {
      this.showModal = !this.showModal; //切换showModal 的值来切换弹出与收起
    },
     //响应on-cancel事件，来把弹出框关闭
    cancel() {
      this.showModal = false;
    }
	}
		}
</script>

<style scoped="scoped">
  .all{
  	width:80%;
  	height: 80%;
  	padding: 40px;
  }
  .text {
    font-size: 14px; 
    text-align: center;
  }
  
  .item {
    margin-bottom: 18px;
    width:80px;
    line-height: 30px;
    border:1px solid #F7F7F7;
    background: #F7F7F7;
  }
  .item1{
  	margin-bottom: 18px;
    line-height: 30px;
    border:1px solid white;
    background: white;
    border-bottom: 1px solid gainsboro;
  }
  .txt1{
  	width:10%;
  }
   .txt2{
  	width:90%;
  }
  .content1{
  	width:100%;
  	display:flex;
  	flex-direction:row;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  
 
 
 
 
 
 
</style>